<template>
  <div class="rightTop" style="width: 6rem;height: 3rem">
    <div class="bugreasion" v-show="isshow">
    <div @mouseenter="onMouseOver" @mouseleave="onMouseOut">
    <!--    备注图片-->
<!--    <img :src="imgurl" id="rtRemark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">-->
    <img :src="imgurl" id="rtRemark">
    <!--    备注内容-->
    <div v-show="seen" id="r1cont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <li>更多信息请访问</li>
        <a :href=url target="_blank" style="color:#CCFFFF">{{url}}</a>
        <li>账号 admin 密码zhjs2021</li>
      </div>
    </div>
    </div>
    <p style="font-size: 0.235rem;font-weight: bolder;color: #CCFFFF;padding-top: 0.1rem;padding-left: 0.1rem">Bug原因</p>
    <div id="rightTop" style="width: 5.5rem;height: 2.5rem"></div>
    </div>
    <div class="key_word" v-show="keyshow">
<!--    备注图片-->
    <img :src="imgurl" id="rtRemark" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
<!--    备注内容-->
    <div v-show="seen" id="r1cont" style="position: fixed;z-index: 9999999;">
      <div style="margin-top: 0.2rem;margin-left: 0.2rem;margin-right: 0.2rem">
        <!-- <li>字体越大代表该模块bug越多</li> -->
        <li>PTM如需展示Bug原因，前往</li>
        <a :href=url target="_blank" style="color:#CCFFFF">{{url}}</a>
        <li>账号 admin 密码zhjs2021</li>
      </div>
    </div>
    <div>
<!--      标题-->
      <p style="font-size: 0.235rem;font-weight: bolder;color: #CCFFFF;padding-top: 0.1rem;padding-left: 0.1rem">Bug关键字</p>
<!--      词云-->
      <wordcloud :data="defaultWords" nameKey="name" valueKey="value" :color="myColors" :fontSize="fontSize"
                 :showTooltip="false" style="width: 6rem;height: 2.75rem"></wordcloud>
    </div>
  </div>
  </div>
</template>

<script>
import img from '../assets/remark.png'
import wordcloud from 'vue-wordcloud'

export default {
  data() {
    return {
      // 用于备注
      imgurl:img,
      seen:false,
      opinionData:[],
      details:null,
      url:this.$global.host+'admin',
      isshow:false,
      keyshow:true,
      // 词云字体大小分布区间
      fontSize:[this.refontSize(10),this.refontSize(30)],
      // 词云颜色
      myColors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
      // 词云数据
      defaultWords: []
    }
  },
  components: {
    wordcloud
  },
  mounted() {
    this.getbugreasions()
    this.getdata();
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("rightTop"));
      var option = {
        // 提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          label: {
            show: true,
            // backgroundColor: "#7B7DDC"
          },
          // formatter(params){
          //   console.log(params)
          // }

        },
        // 周边间距
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '8%',
          containLabel: true
        },
        // x轴设置
        xAxis: [
          {
            type: 'category',
            data: this.opinionData[0],
            splitLine:{
              show:false
            },
            axisLine:{
              lineStyle:{
                color:"#CCFFFF",
              }
            },
            axisLabel:{
              color:"#CCFFFF",
              rotate:45,
              fontSize:this.refontSize(14),
              formatter: (value) =>{
                var data = value.substring(0,4);
                return data
              }
            }
          }
        ],
        // y轴设置
        yAxis: [
          {
            type: 'value',
            splitLine:{
              show:false
            },
            splitNumber:3,
            axisLine:{
              lineStyle:{
                color:"#CCFFFF",
              }
            },
            axisLabel:{
              color:"#CCFFFF",
              fontSize:this.refontSize(14),
              formatter:'{value}个'
            }
          }
        ],
        // 数据
        series: [
          {
            name: 'Bug原因',
            type: 'bar',
            itemStyle: {
              color: '#66CDAA'
            },
            // stack: 'Bug',
            emphasis: {
              focus: 'series'
            },
            data: this.opinionData[1]
          },
          {
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: this.refontSize(8),
            // yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: "#F02FC2"
              }
            },
            data: this.details
          },
        ]
      }
      myChart.setOption(option);
    },
    // 获取Major以上未决Bug数据
    getbugreasions(){
      this.$http({ method: 'get',
        url: 'show/bugresions/?system='+this.$route.query.project,}).then(response => {
            // console.log(response.data);
            // 获取数据并赋给opinionData
            var datas = []
            var reasionName = []
            var count = []
            var details = []
            if (JSON.stringify(response.data) != "{}"){
              console.log(11111111111)
              for (var bug in response.data) {
                reasionName.push(bug)
                count.push(response.data[bug]['count'])
                details.push(response.data[bug]['details'])
              }
              datas.push(reasionName,count)
              // console.log(details)
              this.opinionData = datas
              this.details = details
              this.SetEchart()
              this.isshow = !this.isshow
              this.keyshow = !this.keyshow
            }
          },
      );
    },
    // 鼠标放置操作
    onMouseOver() {
      this.seen=true
    },
    // 鼠标离开操作
    onMouseOut() {
      this.seen=false
    },
    // 请求bug分布模块
    getdata() {
      this.$http({
        method: 'get',
        url: 'show/key_word/?system=' + this.$route.query.project,
      }).then(response => {
        // console.log(response.data);
        var data = []
        for (var name in response.data) {
          if (data.length<20) {
            data.push({
              name: name,
              value: Math.sqrt(response.data[name])
            })
          }
        }
        this.defaultWords = data
          },
      );
    },
  }
}


</script>

<style lang="scss" scoped>
//.centerBottom{
//  #scroll{
//    padding-left: 4rem;
//    padding-top: 2rem;
//  }
//}
#rtRemark{
  //float: right;
  position: fixed;
  z-index: 99999999;
  //padding-top: 1rem;
  margin-left: 5.2rem;
  width: 0.3rem;
  height: 0.3rem;
}
#r1cont{
  width: 4rem;
  height: 1.5rem;
  //background-color:#171823;
  margin-top: 0.3rem;
  margin-left: 1.5rem;
  color:#CCFFFF;
  //box-shadow: #5f5f5f;
  background: rgba(64,64,64,.5);
  //li{ line-height:0.35rem}
  li:before {
    content: "";
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    border-radius: 50%;
    background: #4F8EFF;
    vertical-align: middle;
    margin-right: 0.08rem;
    padding-top:1%
  }
}
li{
  padding-top: 5%;
}
a{
  display: block;
  padding-top: 5%;
}
</style>